<template>
  <view class="word-match-game">
    <!-- 课程卡片 -->
    <view v-if="classHistoryList.length > 0" class="current-selection">
      <text class="selection-title">选择你的训练记录:</text>
      <view class="selected-cards-list">
        <view
            v-for="(course, index) in classHistoryList"
            :key="course.courseId"
            class="selected-card-item"
            :class="index%2===0?'chinese':'english'"
            @click="gotoGame(course)"
        >
          <text class="selected-card-text">训练时间：{{ course.courseTime }}（单词课）</text>
          <text class="selected-card-type">共{{ course.studyWordNumsTotal }}词</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view v-if="!hasMore && classHistoryList.length > 0" class="no-more-container">
        <text class="no-more-text">没有更多数据了</text>
      </view>
    </view>

    <view v-if="classHistoryList.length === 0 && !loading" class="current-selection">
      <text class="selection-title">没有可供选择的课程</text>
    </view>
  </view>
</template>

<script>
import {stuGetCourseList} from "../../api/enStudent";

export default {
  name: "home",
  data() {
    return {
      classHistoryList: [],
      loading: false,
      hasMore: true,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    };
  },

  onLoad(options) {
    this.type = options.type;
    this.loadData();
  },

  onReachBottom() {
    // 滚动到底部时加载更多
    this.loadMore();
  },

  onPullDownRefresh() {
    // 下拉刷新
    this.refreshData();
  },

  methods: {
    // 初始化加载数据
    async loadData() {
      this.loading = true;
      try {
        const res = await stuGetCourseList({
          page: {
            pageNum: 1,
            pageSize: this.page.pageSize
          }
        });

        this.classHistoryList = this.formatCourseList(res.records);
        this.page.total = res.total;
        this.page.pageNum = 1;
        this.hasMore = this.classHistoryList.length < res.total;

      } catch (error) {
        console.error('加载数据失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },

    // 加载更多数据
    async loadMore() {
      // 检查是否正在加载或没有更多数据
      if (this.loading || !this.hasMore) {
        return;
      }

      this.loading = true;
      try {
        const nextPage = this.page.pageNum + 1;
        const res = await stuGetCourseList({
          page: {
            pageNum: nextPage,
            pageSize: this.page.pageSize
          }
        });

        if (res.records && res.records.length > 0) {
          const newList = this.formatCourseList(res.records);
          this.classHistoryList = [...this.classHistoryList, ...newList];
          this.page.pageNum = nextPage;
          this.hasMore = this.classHistoryList.length < res.total;
        } else {
          this.hasMore = false;
        }

      } catch (error) {
        console.error('加载更多数据失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    // 下拉刷新
    async refreshData() {
      this.loading = true;
      try {
        const res = await stuGetCourseList({
          page: {
            pageNum: 1,
            pageSize: this.page.pageSize
          }
        });

        this.classHistoryList = this.formatCourseList(res.records);
        this.page.total = res.total;
        this.page.pageNum = 1;
        this.hasMore = this.classHistoryList.length < res.total;

        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });

      } catch (error) {
        console.error('刷新数据失败:', error);
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },

    // 格式化课程列表
    formatCourseList(records) {
      if (!records) return [];

      return records.map(item => ({
        ...item,
        courseTime: item.courseTime ? item.courseTime.substring(0, 10) : '未知日期'
      }));
    },

    gotoGame(course) {
      if (this.type === 'dcxxl') {
        uni.navigateTo({
          url: '/pages/game/wordsDispelJoy/wordsDispelJoy?courseId=' + course.courseId
        });
      } else if (this.type === 'msddy') {
        uni.navigateTo({
          url: '/pages/game/fixedCollocation/fixedCollocation?courseId=' + course.courseId
        });
      } else if (this.type === 'cqdjz') {
        uni.navigateTo({
          url: '/pages/game/incompleteSentences/incompleteSentences?courseId=' + course.courseId
        });
      } else {
        uni.navigateTo({
          url: '/pages/game/dictation/dictation?courseId=' + course.courseId
        });
      }
    }
  }
};
</script>

<style scoped>
.word-match-game {
  padding: 20rpx;
  background: linear-gradient(135deg, #ea9b7e 0%, #bdd6c7 100%);
  min-height: 100vh;
}

/* 当前选中的卡片容器 */
.current-selection {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

/* 标题 */
.selection-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 16rpx;
}

/* 卡片列表 */
.selected-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  flex-wrap: wrap;
}

/* 单个卡片 */
.selected-card-item {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.selected-card-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* 英语卡片样式 */
.selected-card-item.english {
  background: #b5c8da;
  border: 2rpx solid #3498db;
}

.selected-card-item.english:active {
  background: #a0b8d0;
  border-color: #2980b9;
}

/* 汉字卡片样式 */
.selected-card-item.chinese {
  background: #85b88f;
  border: 2rpx solid #278c1f;
}

.selected-card-item.chinese:active {
  background: #76a580;
  border-color: #1f7a17;
}

/* 卡片内容文字 */
.selected-card-text {
  font-size: 24rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 8rpx;
}

/* 卡片类型标识 */
.selected-card-type {
  font-size: 18rpx;
  color: #7f8c8d;
  background: rgba(255, 255, 255, 0.7);
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.loading-text {
  font-size: 24rpx;
  color: #7f8c8d;
  display: flex;
  align-items: center;
}

.loading-text::before {
  content: '⏳';
  margin-right: 8rpx;
  font-size: 28rpx;
}

/* 没有更多数据样式 */
.no-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.no-more-text {
  font-size: 24rpx;
  color: #95a5a6;
  display: flex;
  align-items: center;
}

.no-more-text::before {
  margin-right: 8rpx;
  font-size: 28rpx;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60rpx 20rpx;
  color: #7f8c8d;
}

.empty-state::before {
  content: '📚';
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

/* 响应式设计 */
@media (max-width: 750px) {
  .selected-cards-list {
    flex-direction: column;
  }

  .selected-card-item {
    min-height: 120rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* 滚动加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selected-card-item {
  animation: fadeIn 0.5s ease-out;
}
</style>
